<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
      text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
      <template v-for="item in items">
        <template v-if="item.subs">
          <el-submenu :index="item.index" :key="item.index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                <template slot="title">{{ subItem.title }}</template>
                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{
                  threeItem.title }}</el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="subItem.index">{{ subItem.title
              }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { getUserInfo } from '@/utils/userInfo';
import $flatMapDeep from 'lodash/flatMapDeep';
import bus from '../common/bus';
export default {
  data() {
    return {
      collapse: false,
      items:[],
      // items: [
      //   {
      //     icon: 'el-icon-lx-home',
      //     index: 'dashboard',
      //     title: '系统首页'
      //   },
      //   {
      //     icon: 'el-icon-lx-friend',
      //     index: 'user',
      //     title: '用户管理'
      //   },
      //   {
      //     icon: 'el-icon-lx-shopfill',
      //     index: '3',
      //     title: '商户管理',
      //     subs: [
      //       {
      //         index: 'merchant',
      //         title: '商户管理'
      //       },
      //       {
      //         index: 'merchantpm',
      //         title: '商户排名'
      //       },
      //     ]
      //   },
      //   {
      //     icon: 'el-icon-lx-servicefill',
      //     index: '5',
      //     title: '服务管理',
      //     subs: [
      //       {
      //         index: 'service',
      //         title: '服务管理'
      //       },
      //       {
      //         index: 'servicetype',
      //         title: '服务类别'
      //       },
      //     ]
      //   },
      //   {
      //     icon: 'el-icon-document',
      //     index: '6',
      //     title: '订单管理',
      //     subs: [
      //       {
      //         index: 'indentclear',
      //         title: '洗车订单'
      //       },
      //       {
      //         index: 'indentmaintain',
      //         title: '维修订单'
      //       },
      //       {
      //         index: 'indenthealth',
      //         title: '保养订单'
      //       },
      //       {
      //         index: 'indentjudge',
      //         title: '评价管理'
      //       },
      //     ]
      //   },
      //   {
      //     icon: 'el-icon-phone',
      //     index: 'rescue',
      //     title: '救援任务',
      //   },
      //   {
      //     icon: 'el-icon-s-promotion',
      //     index: '8',
      //     title: '信息发布',
      //     subs: [
      //       {
      //         index: 'notice',
      //         title: '信息发布'
      //       },
      //       {
      //         index: 'unstatus',
      //         title: '待审核'
      //       },
      //       {
      //         index: 'onstatus',
      //         title: '已审核'
      //       },
      //     ]
      //   },
      //   {
      //     icon: 'el-icon-s-data',
      //     index: 'ordernum',
      //     title: '订单统计'
      //   },
      //   {
      //     icon: 'el-icon-lx-warn',
      //     index: '9',
      //     title: '系统管理',
      //     subs: [
      //       {
      //         index: 'systemmenu',
      //         title: '系统菜单'
      //       },
      //       {
      //         index: 'systemuser',
      //         title: '系统用户'
      //       },
      //       {
      //         index: 'systemrole',
      //         title: '系统角色'
      //       },
      //       {
      //         index: 'datadictionary',
      //         title: '数据字典'
      //       }
      //     ]
      //   },
      // ],
      oldpath: '',
    };
  },
  computed: {
    onRoutes() {
      if (this.$route.meta.oldpath) {
        return this.oldpath;
      } else {
        this.oldpath = this.$route.path.replace('/', '');
        return this.$route.path.replace('/', '');
      }
    }
  },
  created() {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on('collapse', msg => {
      this.collapse = msg;
      bus.$emit('collapse-content', msg);
    });
  },
  mounted() {
    this.getMenuByRid();
  },
  methods: {
    async getMenuByRid() {
      let rid = getUserInfo().rid;
      let res = await this.$API.LimitManager.reqUserMenusByRid(rid);
      let menu = [];
      if(res.code == 200){
        menu = $flatMapDeep(res.data, this.mapData);
      }
      menu.unshift({icon: 'el-icon-s-home',index: 'dashboard',title: '系统首页'});
      this.items = menu;
    },
    forInObj(obj) {
      let subs;
      let title;
      let icon;
      let index;
      for (const key in obj) {
        let val = obj[key];
        if (key == 'children') {
          subs = $flatMapDeep(val, this.mapData);
        } else if (key == 'menusname') {
          title = val;
        } else if (key == 'icon') {
          icon = val;
        } else if (key == 'path') {
          if(val == '/'){
            index = obj['sort'] + '';
          }else {
            index = val.slice(1);
          }
        };
      }
      if (subs.length > 0) {
        return { icon, index, title, subs };
      } else {
        return { icon, index, title };
      };
    },
    mapData(obj) {
      return this.forInObj(obj);
    }
  }
};
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}

.sidebar>ul {
  height: 100%;
}
</style>
